<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<style>
    #weather {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
</style>

<body>
    <div id="weather"></div>
    <button id="btn">点击</button>
</body>

</html>
<script src="./js/ajax.js"></script>
<script>
    //获取放置天气的容器
    let weather = document.querySelector("#weather");
    //回调函数
    // btn.onclick = function () {
    let res;

    //封装一个渲染页面的函数
    function render(currentArr) {
        let html = "";
        currentArr.forEach(item => {
            html += `
                    <div class="weather-container">
                        <!-- 日期 -->
                        <div class="weatcher__date">
                            <span>${item.date}</span>
                            <span>${item.week}</span>
                        </div>
                        <!-- 当前温度展示 -->
                        <div class="weather__celsius">
                            <div class="celsius__left">
                                <h1>${item.tem}</h1>
                            </div>
                            <div class="celsius__right">
                                <b>℃</b>
                                <b>${item.wea}</b>
                            </div>
                        </div>
                        <!-- 温度范围 -->
                        <!-- BEM命名规则 -->
                        <!-- B block
                        E element
                        M modefier 修饰名 -->
                        <div class="weather--info">
                            <p class="weather--info__rate">${item.tem2}~${item.tem1}</p>
                            <p class="weather--info__win">${item.win}${item.win_speed}</p>
                            <i class="weather--info__air">${item.air} ${item.air_level}</i>
                        </div>
                    </div>
                    `
        })

        return html;
    }


    ajax({
        url: "http://chst.vip/weather/getWeather?key=all",
        success(res) {
            console.log(res);
            //数组
            res = res.data;

            //逻辑处理必须写到这个回调里面

            //1.取30条,返回的数据有591条

            let currentArr = res.splice(0, 10);
            console.log(currentArr);
            //2.循环数据,动态的创建结构
            //item就是对象
            // {
            //     air: "72"
            //     air_level: "良"
            //     air_pm25: "53"
            // }

            //3.通过拼接字符串的方式来动态创建结构
            let html = render(currentArr)

            weather.innerHTML = html;

            // console.log("scrollTop===" + document.documentElement.scrollTop);
            // console.log("scrollHeight===" + document.documentElement.scrollHeight);
            // console.log("clientHeight===" + document.documentElement.clientHeight);
            let count = 10;
            window.onscroll = function () {
                //获取关键的三个指标
                let clientHeight = document.documentElement.clientHeight;
                let scrollHeight = document.documentElement.scrollHeight;
                let scrollTop = document.documentElement.scrollTop;
                //计算阈值
                let threshold = scrollHeight - (scrollTop + clientHeight);

                if (threshold <= 100) {//如果滚动条快接到达底部了

                    count += 10 //让count++
                    let currentArr = res.splice(0, count);//再去请求返回的数组中截取内容
                    if (count >= res.length - 1) {//如果截取的内容超出了后台返回数据的数量
                        return //啥也不做
                    }
                    let html = render(currentArr);
                    weather.innerHTML = html

                }
            }
        },
        error(err, xhr) {
            console.log(err);
        }
    })

        // console.log(res);//异步的,这里是得不到返回的结果的
    // }
</script>